﻿@{
    Layout = null;
}
@model IList<ArticleInfo>
<!DOCTYPE html>

<html>
<head>
    <title>Gallery</title>
    <link href="/Areas/CPP/Content/gallery/css/gallery.css" rel="stylesheet" />
    <link href="/Areas/CPP/Content/gallery/css/style.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        $(function() {
            changeInfo();
            $(".rg-image-nav-prev").click(function(e) {
                e.preventDefault();
                prve();
            });

            $(".rg-image-nav-next").click(function (e) {
                e.preventDefault();
                next();
            });

            $("#gallery-items-all img").click(function (e) {
                $("#gallery-items-all img").removeClass("current");
                $(this).addClass("current");
                changeInfo();
            });


            $("#prvePage").click(function (e) {

                var pageIndex = parseInt($("#numbers").val()) - 1;
                if (pageIndex <= 1)
                {
                    pageIndex = 1;
                }
                location.href = '/CPP/CArticle/Gallery?pageIndex=' + pageIndex;
            });


            $("#nextPage").click(function (e) {
                var pageIndex = parseInt($("#numbers").val()) + 1;
                if (pageIndex >=  parseInt($("#pages").val()))
                {
                    pageIndex = parseInt($("#pages").val());
                }
                location.href = '/CPP/CArticle/Gallery?pageIndex=' + pageIndex;
            });


        });


        function changeInfo() {
            $("#showImage h1").text($("#gallery-items-all img[class='current']").data("title"));
            $("#showImage img").attr("src", $("#gallery-items-all img[class='current']").attr("src"));
            $("#showImage p").html($("#gallery-items-all img[class='current']").data("description"));
        }

        function next() {
            var $current = $("#gallery-items-all img[class='current']");
            var $next = $current.parents("li")
                .next();
            if ($next.length == 1) {
                $next.find("img").addClass("current");
                $current.removeClass("current");
                changeInfo();
            }
                
           
        }

        function prve() {
            var $current = $("#gallery-items-all img[class='current']");
            var $prve = $current.parents("li").prev();
            if($prve.length == 1)
            {
                $prve.find("img").addClass("current");
                $current.removeClass("current");
                changeInfo();
            }
        }
    </script>
</head>
<body>
    <div class="gallery-wrapper">
        <div class="imgwrapper rg-image-wrapper">
            <div class="gallery-left rg-image-nav">
                <a href="#" class="rg-image-nav-prev"></a>
                <a href="#" class="rg-image-nav-next"></a>
            </div>
            <div id="showImage" class="gallery-image rg-image">
                <h1>文化徽商</h1>
                <div class="image-wrapper">
                    <img src="/Upload/image/20130324/8fe2f78d-da17-45ad-a84c-d45c8d4354e1.jpg" width="666" height="500" />
                </div>
                <div class="description">
                    <p title="">大空间的卡机贷记卡就可打可就的三发就大空间的卡机贷记卡就可打可就的三发就大空间的卡机贷记卡就可打可就的三发就大空间的卡机贷记卡就可打可就的三发就大空间的卡机贷记卡就可打可就的三发就</p>
                </div>
            </div>
        </div>
        <div class="itemwrapper">
            <div class="gallery-leftItem es-nav">
                <span id="prvePage" class="es-nav-prev"></span>
            </div>
            <div id="gallery-items-all" class="gallery-items">
                <ul>
                    @for (int i = 0; i < Model.Count; i++)
                    {
                        if (i == 0)
                        {
                            <li><a href="javascript:void(0);">
                                    <img data-title="@Model[i].Title" data-description="@Model[i].ArticleDetail.Content"  class="current" src="@Model[i].ImgUrl" /></a></li>
                        }
                        else
                        {
                           
                            <li><a href="javascript:void(0);">
                                    <img data-title="@Model[i].Title" data-description="@Model[i].ArticleDetail.Content"  src="@Model[i].ImgUrl" /></a></li>
                        }
                    }
                </ul>
            </div>
            <div class="gallery-rightItem es-nav">
                <span id="nextPage" class="es-nav-next">
                </span>
            </div>
        </div>
    </div>
    <input type="hidden" value="@ViewBag.PageIndex" id="numbers" />
    <input type="hidden" value="@ViewBag.PageCount" id="pages" />
</body>
</html>
